<div class="verticalSection">
    <div class="sectionTitleContainer flex align-items-center">
        <h1 class="sectionTitle">Schedules Direct</h1>
        <a is="emby-linkbutton" rel="noopener noreferrer" class="raised button-alt headerHelpButton" target="_blank" href="https://jellyfin.org/docs/general/server/live-tv/setup-guide#adding-guide-data">${Help}</a>
    </div>
    <p class="createAccountHelp"></p>
</div>

<div style="margin:1.5em 0 1em;" class="flex align-items-center">
    <h2 style="background-color:rgba(82,181,75,.8);color:#fff;margin: 0;border-radius:100em;height:1.7em;width:1.7em;" class="flex align-items-center justify-content-center">
        1
    </h2>
    <h3 style="margin:0 0 0 .5em;">
        ${GuideProviderLogin}
    </h3>
</div>

<form class="formLogin">
    <!-- Terrible, but this hidden field prevents the yellow background in chrome -->
    <div style="height:0; overflow: hidden;"><input type="text" name="fakeusernameremembered" tabindex="-1" /><input type="password" name="fakepasswordremembered" tabindex="-1" /></div>
    <div>
        <br />
        <div class="inputContainer">
            <input is="emby-input" class="txtUser" label="${LabelUsername}" required="required" autocomplete="off" />
        </div>
        <div class="inputContainer">
            <input is="emby-input" class="txtPass" label="${LabelPassword}" required="required" autocomplete="off" type="password" />
        </div>
        <div>
            <button is="emby-button" type="submit" class="raised button-submit block"><span>${Save}</span></button>
        </div>
    </div>
</form>
<br />
<div class="listingsSection hide">
    <div style="display: flex; align-items: center;margin:1.5em 0 1em;">
        <h2 style="background-color:rgba(82,181,75,.8);color:#fff;margin: 0;border-radius:100em;height:1.7em;width:1.7em;" class="flex align-items-center justify-content-center">
            2
        </h2>
        <h3 class="guideProviderSelectListings">
            ${GuideProviderSelectListings}
        </h3>
    </div>
    <form class="formListings">
        <div>
            <div class="selectContainer">
                <select is="emby-select" id="selectCountry" data-mini="true" required="required" label="${LabelCountry}"></select>
            </div>
            <div class="inputContainer">
                <input is="emby-input" class="txtZipCode" label="${LabelZipCode}" required="required" />
            </div>
            <div class="selectContainer">
                <select is="emby-select" id="selectListing" data-mini="true" required="required" label="${LabelLineup}"></select>
            </div>
            <div>
                <label class="checkboxContainer">
                    <input type="checkbox" is="emby-checkbox" class="chkAllTuners" />
                    <span>${OptionEnableForAllTuners}</span>
                </label>
                <div class="selectTunersSection hide">
                    <h3 class="checkboxListLabel">${HeaderTuners}</h3>
                    <div class="checkboxList paperList checkboxList-paperList tunerList">
                    </div>
                </div>
            </div>
            <br />
            <div>
                <button is="emby-button" type="submit" class="raised button-submit block btnSubmitListingsContainer btnSubmitListings hide"><span>${Save}</span></button>
                <button is="emby-button" type="button" class="raised button-cancel block btnCancel hide" onclick="history.back();"><span>${ButtonCancel}</span></button>
            </div>
        </div>
    </form>
</div>
